<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- position: absolute; 绝对定位 -->
     <!-- 
        参考元素：参考的是距离最近的有定位的祖先元素 如果祖先元素没有定位 参考body
        必须搭配偏移量属性才会发生位置移动
        left top 由于参考点不同 left正值不在等于right负值
        脱离标准流 会让出标准流位置 可以设置宽高 可以随时定义位置 不设置宽高会被内容撑开
        实际中不会用body当做参考定位
        参考元素会参考最近的父元素 有任意定位都会作为父元素参考 大多会使用子绝父相的情况

        祖先元素参考点 盒子border以内的四个点
     -->

     <!-- position: fixed; 固定定位 -->
      <!-- 
        参考元素 浏览器四个角
        脱离标准流 可以设置宽高 会始终显示在浏览器窗口
      -->
    
    <!-- 定位应用 -->

    <!-- 压盖效果 -->
    <!-- 绝对定位制作压盖 -->
    <!-- 居中 位置left: 50%;  设置一个margin值 设置成自身总体宽度的一半 加负号 -->
     <!-- 子盒子比父盒子长 使用相对定位居中 -->
    
     <!-- 
        默认压盖顺序
        定位元素都会压盖标准流或者浮动元素
        定位元素只跟html书写顺序有关系 先写在最下面
        
        自定义压盖顺序
        z-index:1; 属性 数字
        数字越大 在最上面
        z-index若数值相同 仍旧看书写顺序
        非定位元素的z-index无效
        若父级设置z-index 子级设置或者不设置 子级继承父级 会按父级的值去压盖
        父级不设置 子级设置 才会子级之间压盖
     -->
</body>
</html>